<template>
  <!-- 运行分析 -->
  <view class="conter">
    <cc-goback title='运行分析' color="#fff"></cc-goback>
    <view class="navigation_head"></view>
    <view class="head_box">
      <view class="head">
        <view class="head_a">
          <view class="head_word">
            <ms-dropdown-menu>
              <ms-dropdown-item @input="mileage" v-model="value" :list="All_enterpriseList"></ms-dropdown-item>
            </ms-dropdown-menu>
          </view>
        </view>
      </view>
      <view class="head_time">
        <view class="head_left">
          <uni-datetime-picker type="date" :value="date" start="2020-6-15" end="2025-6-15" @change="dateChange">
          </uni-datetime-picker>
        </view>
        <view class="head_left">
          <uni-datetime-picker type="date" :value="date" start="2020-6-15" end="2025-6-15" @change="dateChange_a">
          </uni-datetime-picker>
        </view>
      </view>
    </view>
    <view class="box" v-if="equipmentList" @click="cardbtn">
      <view class="box_a">
        <view class="box_head1">
          {{equipmentList[0].equName}}
        </view>
        <view class="box_head">
          <view class="box_left">
            <view class="box_number">
              {{equipmentList[0].runTime}}h
            </view>
            <view class="box_word">
              运行时长
            </view>
          </view>
          <view class="box_right">
            <view class="box_number">
              {{equipmentList[0].power}}kwh
            </view>
            <view class="box_word">
              总耗电量
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 列表卡片 -->
    <view class="foot_card">
      <view class="list">
        <!-- 表格 -->
        <uni-table border>
          <!-- 表头行 -->
          <uni-tr>
            <uni-th width="25%" align="center">状态</uni-th>
            <uni-th width="25%" align="center">开始时间</uni-th>
            <uni-th width="25%" align="center">结束时间</uni-th>
            <uni-th width="25%" align="center">持续时长</uni-th>
          </uni-tr>
          <!-- 表格数据行 -->
          <uni-tr v-for="(item,i) in formList" :key='i'>
            <uni-td align="center" style="color: #1677FF; width: 126rpx; ">{{item.stateName}}</uni-td>
            <uni-td align="center">{{item.startTime}}</uni-td>
            <uni-td align="center">{{item.endTime}}</uni-td>
            <uni-td align="center">{{item.runTime}}</uni-td>
          </uni-tr>
        </uni-table>
      </view>
    </view>
  </view>
</template>

<script>
  import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
  import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
  export default {
    components: {
      msDropdownMenu,
      msDropdownItem
    },
    data() {
      return {
        equipmentList: '',
        date: '',
        value: 0,
        startTime: '',
        endTime: '',
        All_enterpriseList: [],
        enterprise_id: '',
        formList:''
      };
    },
    onLoad() {
      this.equipmentList = uni.getStorageSync('equipmentList')
      this.startTime = uni.getStorageSync('startTime')
      this.endTime = uni.getStorageSync('endTime')
      this.getAllstate()
      // console.log(this.equipmentList)
      // console.log(this.startTime)
    },
    methods: {
      // 全部企业状态
      getAllstate() {
        this.$http.get('/envirnment-air/app/workStatistics/realWork', {}).then(res => {
          console.log('设备状态数量统计', res)
          if (res.code == '00000') {
            this.stateList = res.data
            // console.log('设备状态数量统计', this.stateList)
            const list = []
            res.data.enterpriseCount.forEach((item, index) => {
              list.push({
                text: item.name,
                id: item.id,
                value: index + 1
              })
            })
            list.unshift({
              text: '选择企业',
              value: 0
            })
            this.All_enterpriseList = list
          }
        })
      },
      // 运行分析-全部设备查询
      getAll_equipment(){
        this.$http.get('/envirnment-air/app/workStatistics/runAnalysisEqu',{
           startTime:this.startTime,
           endTime:this.endTime,
           enterPriseId:this.enterprise_id
        }).then(res=>{
          if(res.code=='00000'){
            this.equipmentList = res.data
          }
        })
      },
      // 运行分析-设备数据查询
      getequipment() {
        this.$http.get('/envirnment-air/app/workStatistics/runAnalysisData', {
          startTime: this.startTime,
          endTime: this.endTime,
          equId: this.equipmentList[0].equId
        }).then(res => {
          console.log(res)
          if (res.code == '00000') {
            this.formList = res.data
            console.log('this.formList', this.formList)
          }
        })
      },
      cardbtn() {
        this.getequipment()
        uni.removeStorageSync('equipmentList');
        uni.removeStorageSync('startTime')
        uni.removeStorageSync('endTime')
      },
      mileage(e) {
        this.enterprise_id = e.id
        // console.log('enterprise_id',this.enterprise_id);
      },
      dateChange(e) {
        this.startTime = e
        // console.log('0000',this.startTime)
      },
      dateChange_a(e) {
        this.endTime = e
        this.getAll_equipment()
        // console.log('0000',this.endTime)
      },
    }
  }
</script>

<style lang="scss">
  .conter {
    // height: 1000rpx;
    background-color: #F7F7F7;
    overflow: hidden;
  }

  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .head_box {
    width: 702rpx;
    margin: 20rpx auto;
    display: flex;
    justify-content: space-between;
    height: 80rpx;
    overflow: hidden;
  }

  .head_time {
    width: 400rpx;
    height: 80rpx;
    background-color: #FFFFFF;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }

  .head_left {
    width: 45%;
  }

  .head {
    display: flex;
    align-items: center;
  }

  .head_a {
    width: 280rpx;
    height: 80rpx;
    overflow: hidden;
    border-radius: 8rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
  }

  .head_b {
    width: 232rpx;
    height: 66rpx;
    margin: 20rpx 24rpx 0 0;
    line-height: 66rpx;
    padding-left: 21rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    background: #FFFFFF;
    border-radius: 8rpx;
    border: 1px solid #EAEAEA;
    background-color: #fff;

    image {
      float: right;
      width: 22rpx;
      height: 12rpx;
      margin: 30rpx 24rpx 0 0;
    }
  }

  .box {
    height: 251rpx;
  }

  .box_a {
    width: 460rpx;
    height: 252rpx;
    margin: 20rpx 0 0 24rpx;
    overflow: hidden;
    background: url(../../static/bg_slices/card.png) no-repeat;
    background-size: 100% 100%;
  }

  .box_head1 {
    font-size: 28rpx;
    margin: 20rpx 0 47rpx;
    text-align: center;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
  }

  .box_left {
    float: left;
    text-align: center;
    margin-left: 68rpx;
  }

  .box_right {
    float: right;
    text-align: center;
    margin-right: 68rpx;
  }

  .box_number {
    font-size: 32rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
  }

  .box_word {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
  }
  .foot_card{
    width: 662rpx;
    margin: 0 auto;
    background-color: #FFFFFF;
    border-radius: 8rpx;
    padding: 20rpx;
  }
</style>
